<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>I'm QQ - 每一天，乐在沟通</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/album.css">
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>

    <!--   topbar   部分   start   -->
<div class="topbar" id="topbar">
    <div class="toppic" id="toppic">
        <div class="topside fl">
            <a href="../../index.html" class="logoLink fl">im.qq.com</a>
            <ul class="topNav fl" id="topNav">
                <li>
                    <a href="../../index.html">首页</a>
                </li>
                <li>
                    <a href="../download&safety/QQ/download.html">下载</a>
                </li>
                <li  class="current">
                    <a href="../album/album.html">动态</a>
                </li>
            </ul>
        </div>
        <div class="topTool fr">
            <a href="#" target="_blank" class="topTool_register fl">注册</a>
            <ul>
                <li>
                    <a href="../QQPC/QQPC.html">登录</a>
                </li>
                <li>
                    <a href="../download&safety/QQ/safety.html">QQ安全</a>
                </li>
                <li>
                    <a href="../../QQVIP/QQVIP_index/QQVIP_index.HTML">QQ会员</a>
                </li>
            </ul>
            <div class="flashData">
                <a href="#">当前在线人数：<em>217,072,710</em></a>
            </div>
        </div>
    </div>
</div>


<!--   topbar   部分   end   -->


    <!--   crossbanner   部分   start   -->
    <div class="ww_crossbanner">
        <ul id="ww_crossbanner">
            <li style="opacity: 1"><a href="javascript:void(0)"><img src="images/news_banner1.jpg" alt=""/></a></li>
            <li style="opacity: 0"><a href="javascript:void(0)"><img src="images/alb_bn.jpg" alt=""/></a></li>
        </ul>
    </div>


    <!--   crossbanner   部分   end   -->

    <!--   albumCont   部分   start   -->
    <div class="ww_albumCont" id="ww_albumCont">
        <h1>所有专题</h1>
        <div class="albumWrap">
            <ul id="albumWrap">
                <li>
                    <a href="javascript:void(0)" ><img src="images/alb_1.jpg" alt="QQ音视频"></a>
                    <a href="../QQvedio/QQvedio.html" class="alcover">
                        <h2>QQ音视频</h2>
                        <p>随时随地，随心沟通</p>
                        <div class="vw"><span>查看专题</span></div>
                        <div class="albg"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)"><img src="images/alb_2.jpg" alt="QQ八大办公技巧"></a>
                    <a href="javascript:void(0)" class="alcover">
                        <h2>QQ八大办公技巧</h2>
                        <p>必学办公技能，你get到了吗？</p>
                        <div class="vw"><span>查看专题</span></div>
                        <div class="albg"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)"><img src="images/alb_3.jpg" alt="QQ音视频会议"></a>
                    <a href="javascript:void(0)" class="alcover" >
                        <h2>QQ音视频会议</h2>
                        <p>支持多人语音，多人视频以及屏幕分享</p>
                        <div class="vw"><span>查看专题</span></div>
                        <div class="albg"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)"><img src="images/alb_4.jpg" alt="QQ传文件"></a>
                    <a href="javascript:void(0)" class="alcover" >
                        <h2>QQ传文件</h2>
                        <p>收发自如，随心分享</p>
                        <div class="vw"><span>查看专题</span></div>
                        <div class="albg"></div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/alb_5.jpg" alt="QQ概念版视频"></a>
                    <a class="alcover" id="vediotouch" href="javascript:;" class="alcover">
                        <h2>QQ概念版视频</h2>
                        <p>未来不至于想象；也许，就是明天</p>
                        <div class="vp"><span class="vediotouch">播放视频</span></div>
                        <div class="albg"></div>
                    </a>
                </li>

                <li>
                    <a href="javascript:void(0)"><img src="images/alb_6.jpg" alt="兴趣部落"></a>
                    <a href="javascript:void(0)" class="alcover">
                        <h2>兴趣部落</h2>
                        <p>QQ兴趣聚合社区</p>
                        <div class="vw"><span>查看专题</span></div>
                        <div class="albg"></div>
                    </a>
                </li>
            </ul>
        </div>

    </div>
    <!--   albumCont   部分   end   -->


    <!--   footer   部分   start   -->
<div class="footer">
    <div class="qmaps w">
        <div class="plats">
            <h3>了解热门产品</h3>
            <a href="#" class="mobile">QQ 手机版</a>
            <a href="#" class="pc">QQ PC版</a>
            <a href="#" class="mac">QQ Mac版</a>
            <a href="#" class="pad">QQ Pad版</a>
        </div>
        <dl class="Q_safe">
            <dt>QQ安全</dt>
            <dd><a href="#">安全中心</a></dd>
            <dd><a href="#">冻结帐号</a></dd>
            <dd><a href="#">举报恶意行为</a></dd>
            <dd><a href="#">恢复好友和群</a></dd>
        </dl>
        <dl class="Q_help">
            <dt>帮助反馈</dt>
            <dd><a href="#">腾讯客服</a></dd>
            <dd><a href="#">反馈问题</a></dd>
            <dd><a href="#">腾讯微博</a></dd>
            <dd><a href="#">新浪微博</a></dd>
        </dl>
        <dl class="Q_link">
            <dt>友情链接</dt>
            <dd><a href="#">兴趣部落</a></dd>
            <dd><a href="#">QQ群</a></dd>
            <dd><a href="#">QQ音乐</a></dd>
            <dd><a href="#">QQ浏览器</a></dd>
            <dd><a href="#">来电</a></dd>
            <dd><a href="#">腾讯视频</a></dd>
            <dd><a href="#">腾讯体验中心</a></dd>
            <dd><a href="#">腾讯电脑管家</a></dd>
        </dl>
    </div>


    <div class="copyright">
        <p>Copyright &copy; 1998-
            <script>document.write((new Date()).getFullYear());</script>
            Tencent. All Rights Reserved.
        </p>
        <p>腾讯公司 版权所有</p>
    </div>

</div>

<!--   footer   部分   end   -->

<script src="js/common.js"></script>
<script src="js/animate.js"></script>
<script>
    //topNav  事件
    var topNav = document.getElementById("topNav");
    var lists = topNav.children;
    for (var i = 0; i < lists.length; i++) {
        var li = lists[i];
        li.onmouseover = function () {   //鼠标放上   高亮显示
            for (var i = 0; i < lists.length; i++) {
                var li = lists[i];
                li.removeAttribute("class");
            }
            this.className = "current";
        }

        li.onmouseout = function () {   //鼠标离开  高亮显示回到第一个位置
            for (var i = 0; i < lists.length; i++) {
                var li = lists[i];
                li.removeAttribute("class");
            }
            lists[0].className = "current";
        }
        li.onclick = function () {   //鼠标点击  当前位置高亮显示
            for (var i = 0; i < lists.length; i++) {
                var li = lists[i];
                li.removeAttribute("class");
            }
            this.className = "current";
        }

    }

    //头部移动一定距离   固定在页面顶部
    var topbar = document.getElementById("topbar");
    var ww_albumCont = document.getElementById("ww_albumCont");
   console.log(ww_albumCont.offsetTop);
    window.onscroll = function () {
        if(getScroll().scrollTop >= ww_albumCont.offsetTop) {
            topbar.className = "topbar topicfixed";
        } else {
            topbar.className = "topbar";
        }
    };

</script>

    <script>
        //topNav  单击鼠标  改变当前状态
        var topNav = document.getElementById("topNav");
        var lists = topNav.children;

        for(var i = 0; i < lists.length; i++) {
            var li = lists[i];
            li.onclick = function() {
                for(var i = 0; i < lists.length; i++) {
                    var li = lists[i];
                    li.removeAttribute("class");
                }
                this.className = "current";
            }
        }
        //鼠标放上  改变当前状态  移除其他状态   鼠标离开 回到初始状态
        for(var i = 0; i < lists.length; i++) {
            var li = lists[i];
            li.onmouseover = function() {
                for(var i = 0; i < lists.length; i++) {
                    var li = lists[i];
                   /* li.removeAttribute("class");*/
                    li.className = '';

                }
                this.className = "current";
            }
            li.onmouseout = function() {
                for(var i = 0; i < lists.length; i++) {
                    var li = lists[i];
                    li.className = '';
                }
                lists[2].className = "current";

            }

        }
        
        //轮播图 
        //鼠标移入  清除定时器
        $("#ww_crossbanner").mouseenter(function() {
            clearInterval(timerId);
        });
        //鼠标移出  开启定时器
        $("#ww_crossbanner").mouseleave(function() {
             timerId = setInterval(function(){
                 timerShow();
            },5000)
        });

        var index = 0;
        var length = $("#ww_crossbanner").children().length;
        var timerId = setInterval(function(){
           timerShow();
        },5000)

        function timerShow() {
             index++;
            index < length;
            $("#ww_crossbanner").children().eq(index).animate({"opacity":1}, 1000).siblings().animate({"opacity":0}, 1000);
            if(index == length) {
                index = 0;

            }
        }

        //克隆第一张图片
        var firstLi = $("#ww_crossbanner").children().eq(0);
        var cloneLi = firstLi.clone(true);
        $("#ww_crossbanner").append(cloneLi);

        //main部分
        $("#albumWrap").children("li").mouseenter(function () {
            $(this).children().eq(1). animate({"opacity":0.9},300);
                console.log($(this).children().eq(1))
        })
        $("#albumWrap").children("li").mouseleave(function () {
            $(this).children().eq(1).animate({"opacity":0},0);
        })
    </script>
</body>
</html>